<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>${sysTitle}</title>
<style type="text/css">
.rap-app-logo{
	top:5px;
	position: absolute;
	width:35px;
	border-radius:50% !important;
}

.rap-app-title{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 40px;
}

.rap-system-list{
	margin: 20px 80px;
}
.rap-system-list .rap-system{
	margin-bottom: 10px;
}

.rap-system a{
    filter: alpha(opacity=80);
    opacity: 0.8;
}
.rap-system a:hover{
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.rap-system-img {
	max-height: 150px;
}

.rap-system-text {
    background-color: #666;
    background-color: rgba(0, 0, 0, 0.55);
    color: white;
    bottom: 6px;
    left: 15px;
    position: absolute;
    padding: 10px;
    cursor:pointer
}
.page-logo{
	width:500px;
}
</style>
</head>
<body class="page-header-fixed page-sidebar-fixed page-quick-sidebar-over-content">
<!-- BEGIN HEADER -->
<div class="page-header navbar navbar-fixed-top">
	<!-- BEGIN HEADER INNER -->
	<div class="page-header-inner">
		<!-- BEGIN LOGO -->
		<div class="page-logo">
			<img class="rap-app-logo img-rounded" src="${ctx}/assets/stwy/img/logo.png">
			<label class="rap-app-title">${sysTitle}</label>
		</div>
		<!-- END LOGO -->
		<!-- BEGIN TOP NAVIGATION MENU -->
		<div class="top-menu">
			<ul class="nav navbar-nav pull-right">
				<!-- BEGIN NOTIFICATION DROPDOWN -->
				<li class="dropdown dropdown-extended dropdown-notification hide" id="header_notification_bar">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
					<i class="icon-bell"></i>
					<span class="badge badge-default">
					7 </span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<p>
								 You have 14 new notifications
							</p>
						</li>
						<li>
							<ul class="dropdown-menu-list scroller" style="height: 250px;">
								<li>
									<a href="#">
									<span class="label label-sm label-icon label-success">
									<i class="fa fa-plus"></i>
									</span>
									New user registered. <span class="time">
									Just now </span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-sm label-icon label-danger">
									<i class="fa fa-bolt"></i>
									</span>
									Server #12 overloaded. <span class="time">
									15 mins </span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-sm label-icon label-warning">
									<i class="fa fa-bell-o"></i>
									</span>
									Server #2 not responding. <span class="time">
									22 mins </span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-sm label-icon label-info">
									<i class="fa fa-bullhorn"></i>
									</span>
									Application error. <span class="time">
									40 mins </span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-sm label-icon label-danger">
									<i class="fa fa-bolt"></i>
									</span>
									Database overloaded 68%. <span class="time">
									2 hrs </span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-sm label-icon label-danger">
									<i class="fa fa-bolt"></i>
									</span>
									2 user IP blocked. <span class="time">
									5 hrs </span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-sm label-icon label-warning">
									<i class="fa fa-bell-o"></i>
									</span>
									Storage Server #4 not responding. <span class="time">
									45 mins </span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-sm label-icon label-info">
									<i class="fa fa-bullhorn"></i>
									</span>
									System Error. <span class="time">
									55 mins </span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-sm label-icon label-danger">
									<i class="fa fa-bolt"></i>
									</span>
									Database overloaded 68%. <span class="time">
									2 hrs </span>
									</a>
								</li>
							</ul>
						</li>
						<li class="external">
							<a href="#">
							See all notifications <i class="m-icon-swapright"></i>
							</a>
						</li>
					</ul>
				</li>
				<!-- END NOTIFICATION DROPDOWN -->
				<!-- BEGIN INBOX DROPDOWN -->
				<li class="dropdown dropdown-extended dropdown-inbox hide" id="header_inbox_bar">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
					<i class="icon-envelope-open"></i>
					<span class="badge badge-default">
					4 </span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<p>
								 You have 12 new messages
							</p>
						</li>
						<li>
							<ul class="dropdown-menu-list scroller" style="height: 250px;">
								<li>
									<a href="inbox.html?a=view">
									<span class="photo">
									<img src="${ctx}/assets/metronic_v3.2.0/admin/layout/img/avatar2.jpg" alt=""/>
									</span>
									<span class="subject">
									<span class="from">
									Lisa Wong </span>
									<span class="time">
									Just Now </span>
									</span>
									<span class="message">
									Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh... </span>
									</a>
								</li>
								<li>
									<a href="inbox.html?a=view">
									<span class="photo">
									<img src="${ctx}/assets/metronic_v3.2.0/admin/layout/img/avatar3.jpg" alt=""/>
									</span>
									<span class="subject">
									<span class="from">
									Richard Doe </span>
									<span class="time">
									16 mins </span>
									</span>
									<span class="message">
									Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
									</a>
								</li>
								<li>
									<a href="inbox.html?a=view">
									<span class="photo">
									<img src="${ctx}/assets/metronic_v3.2.0/admin/layout/img/avatar1.jpg" alt=""/>
									</span>
									<span class="subject">
									<span class="from">
									Bob Nilson </span>
									<span class="time">
									2 hrs </span>
									</span>
									<span class="message">
									Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
									</a>
								</li>
								<li>
									<a href="inbox.html?a=view">
									<span class="photo">
									<img src="${ctx}/assets/metronic_v3.2.0/admin/layout/img/avatar2.jpg" alt=""/>
									</span>
									<span class="subject">
									<span class="from">
									Lisa Wong </span>
									<span class="time">
									40 mins </span>
									</span>
									<span class="message">
									Vivamus sed auctor 40% nibh congue nibh... </span>
									</a>
								</li>
								<li>
									<a href="inbox.html?a=view">
									<span class="photo">
									<img src="${ctx}/assets/metronic_v3.2.0/admin/layout/img/avatar3.jpg" alt=""/>
									</span>
									<span class="subject">
									<span class="from">
									Richard Doe </span>
									<span class="time">
									46 mins </span>
									</span>
									<span class="message">
									Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
									</a>
								</li>
							</ul>
						</li>
						<li class="external">
							<a href="inbox.html">
							See all messages <i class="m-icon-swapright"></i>
							</a>
						</li>
					</ul>
				</li>
				<!-- END INBOX DROPDOWN -->
				<!-- BEGIN USER LOGIN DROPDOWN -->
				<li class="dropdown dropdown-user">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
					<img alt="" class="img-circle hide1" src="${ctx}/assets/rap/img/user.png"/>
					<span class="username username-hide-on-mobile">
						<c:if test="${not empty user.orgName}">${user.orgName}-</c:if>${user.userName}
					</span>
					<i class="fa fa-angle-down"></i>
					</a>
					<ul class="dropdown-menu">
						
						<li><a href="javascript:;" id="rap-change-pwd"> <i
								class="icon-lock"></i> 修改密码
						</a></li>
						<li>
							<a href="extra_profile.html">
							<i class="icon-user"></i> 个人资料 </a>
						</li>
						<li class="divider">
						</li>
						<li><a href="${ctx}/logout"> <i class="icon-key"></i>
								退出系统
						</a></li>
					</ul>
				</li>
				<!-- END USER LOGIN DROPDOWN -->
				<!-- BEGIN QUICK SIDEBAR TOGGLER -->
				<li class="dropdown dropdown-quick-sidebar-toggler">
					<a href="${ctx}/logout" class="dropdown-toggle">
					<i class="icon-logout"></i>
					</a>
				</li>
				<!-- END QUICK SIDEBAR TOGGLER -->
			</ul>
		</div>
		<!-- END TOP NAVIGATION MENU -->
	</div>
	<!-- END HEADER INNER -->
</div>
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
	<div class="rap-page-container">
	<c:if test="${not empty systems}">
		<div class="row rap-system-list">
			<c:forEach items="${systems}" var="sys">
				<div class="rap-system  col-md-3 col-sm-4 col-xs-12">
					<a href="${ctx}/index?sysId=${sys.uuid}">
						<img class="rap-system-img img-responsive img-rounded" src="${ctx}${sys.iconcls}" alt="${sys.funcName}">
					</a>
					<div class="rap-system-text text-center" onclick="javascript:window.location='${ctx}/index?sysId=${sys.uuid}';">${sys.funcName}</div>
				</div>
			</c:forEach>
		</div>
	</c:if>	
	<c:if test="${empty systems}">
	${tips}
	</c:if>
	</div>
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<!-- END FOOTER -->
<script type="text/javascript">
	$("#rap-change-pwd").colorbox({
		iframe : true,
		href : "${ctx}/modules/sys/user/pwd",
		innerWidth : '300px',
		innerHeight : '310px'
	});
</script>
</body>

</html>